<template>
  <basic-container>
    <avue-crud 
    ref="crud"
    :data="tableData" 
    :page.sync="page"
    :search.sync="search"
    :option="option" 
    v-model="form"
    @on-load="requestData"
    :before-open="handleBeforeOpen"
    @refresh-change="handleRefreshChange"
    @search-change="handleSearchChange"
    @search-reset="handleSearchReset"
    @row-save="handleRowSave"
    @row-update="handleRowUpdate"
    @selection-change="handleSelectionChange"
    @row-del="handleRowDel">
      <template slot="menuLeft">
          <el-button v-hasPerm="'sys:dict:save'" type="primary" icon="el-icon-plus" size="small" @click.stop="$refs.crud.rowAdd()">新增</el-button>
      </template>
      <template slot="menuRight">
        <el-button v-hasPerm="'sys:dict:update'" type="primary" @click.stop="$refs.crud.rowEdit(selection[0],selection[0].$index)" :disabled="selection.length!=1" icon="el-icon-edit" circle size="small"></el-button>
        <el-button v-hasPerm="'sys:dict:remove'" type="danger" @click.stop="handleRowDel(selection)" :disabled="selection.length==0" icon="el-icon-delete" circle size="small"></el-button>
      </template>
      <template slot-scope="{row,index}" slot="menu">
        <el-button v-hasPerm="'sys:dict:get'" type="text" icon="el-icon-view" size="small" @click.stop="$refs.crud.rowView(row,index)">查看</el-button>
        <el-button v-hasPerm="'sys:dict:update'" type="text" icon="el-icon-edit" size="small" @click.stop="$refs.crud.rowEdit(row,index)">编辑</el-button>
        <el-button v-hasPerm="'sys:dict:remove'" type="text" icon="el-icon-delete" size="small" @click.stop="handleRowDel(row)">删除</el-button>
        <el-button v-hasPerm="'sys:dictItem:list'" type="text" icon="el-icon-s-grid" size="small" @click.stop="handleOpenDrawer(row)">字典项</el-button>
      </template>
    </avue-crud>
    <el-drawer
      title="字典项"
      size="50%"
      :visible.sync="drawer">
      <SysDictItem v-if="currentRow" :dictId="currentRow.id"></SysDictItem>
    </el-drawer>
  </basic-container>
</template>

<script>
// import { list as listdict} from '@/api/sys/dict'
import * as dictService from '@/api/sys/dict'
import SysDictItem from '../dictItem/index'
import option from './option'

export default {
 components: {
   SysDictItem
 },
 data() {
      return {
        drawer: false, // 抽屉
        currentRow: undefined,
        form:{},
        search: {},
        page: {
          currentPage:1,
          pageSize: 10,
        },
        tableData: [
        ],
        selection: [], // 当前选中行
        option:{
          align:'center',
          menuAlign:'center',
          addBtn: false, // 是否显示新增按钮
          addTitle: '新增字典', // 新增窗口文案
          editBtn: false, // 是否显示编辑按钮
          editTitle: '编辑字典', // 编辑窗口文案
          viewBtn: false,// 是否显示查看按钮
          viewTitle: '查看字典', // 查看窗口文案
          delBtn: false,
          index: true, // 表格序号
          selection: true,// 是否多选
          column: option.buildColumn(this)
        }
      }
    },
    methods: {
      // 请求数据
      requestData() {
         return new Promise((resolve,reject)=>{
           dictService.list({
             pageNum: this.page.currentPage,
             pageSize: this.page.pageSize,
             ...option.buildSearchParam(this)
          }).then(res=>{
            this.tableData = res.data.data.rows
            this.page.total = res.data.data.recordCount
            resolve(res)
          }).catch(e=>{
            reject(e)
          })
         })
      },
      // 弹窗打开前处理事件
      handleBeforeOpen(done, type) {
        if(['view','edit'].includes(type)) {
          dictService.get({
            id: this.form.id
          }).then(res=>{
            this.form = res.data.data
            done()
          })
          done()
        } else {
          done()
        }
      },
      // 新增提交事件
      handleRowSave(row,done,loading) {
        dictService.save(row).then(res=>{
          if(res.data.code === 0) {
            this.$message.success(res.data.msg || "保存成功")
            done()
            this.requestData()
          } else {
           loading()
          }
        }).catch((e)=>{
          this.$message.error("服务器异常"+e)
          loading()
        })
      },
      // 修改提交事件
      handleRowUpdate(row,index,done,loading) {
        dictService.update(row).then(res=>{
          if(res.data.code === 0) {
            this.$message.success(res.data.msg || "修改成功")
            done()
            this.requestData()
          } else {
           loading()
          }
        }).catch((e)=>{
          this.$message.error("服务器异常"+e)
          loading()
        })
      },
      // 删除事件
      handleRowDel(row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = []
          if(row instanceof Array) {
            ids.push(...row.map(item=>{return item.id}))
          } else {
            ids.push(row.id)
          }
          dictService.remove({
            ids: ids
          }).then(res=>{
            if(res.data.code === 0) {
              this.$message.success(res.data.msg || "删除成功")
              this.requestData()
            }
          }).catch((e)=>{
            this.$message.error("服务器异常"+e)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 当选择项发生变化时会触发该事件
      handleSelectionChange(selection) {
        this.selection = selection;
      },
      // 刷新事件
      handleRefreshChange() {
        this.requestData()
      },
      //搜索事件
      handleSearchChange(form, done) {
        this.requestData().then(()=>{
          done()
        }).catch(()=>{
          done()
        })
      },
      // 搜索重置事件
      handleSearchReset() {
        this.requestData()
      },
      // 打开抽屉
      handleOpenDrawer(row) {
        this.currentRow = row
        this.drawer = true
      }
    }
  }
</script>

<style>
</style>
